import {View} from '@tarojs/components'
import {useEffect, useState} from 'react'
import {IconImg} from './images'
type Option = {
  icon?: 'error' | 'success' | 'info'
  title?: string
  content: string | JSX.Element
  cancelText?: string
  confirmText?: string
  confirm?: Function
  cancel?: Function
}
const CModal: React.FC<
  {show: boolean; changeShow: (bol: boolean) => void} & Option
> = ({
  show,
  changeShow,
  icon,
  title,
  content,
  cancelText = '取消',
  confirmText = '确认',
  confirm,
  cancel
}): JSX.Element => {
  const [visible, changeVisible] = useState(false)

  useEffect(() => {
    console.log('modal useEffect show', show)
    changeVisible(show)
  }, [show])

  useEffect(() => {
    changeShow(visible)
  }, [visible])

  return visible ? (
    <View
      className="fixed top-0 left-0 w-screen h-screen flex items-center justify-center"
      style={{
        backgroundColor: 'rgba(0, 0, 0, 0.2000)'
      }}
      onClick={e => {
        changeVisible(false)
        cancel && cancel()
      }}
    >
      <View className="w-290 max-h-280 rounded-8 bg-white">
        <View
          className="modal-body max-h-230 pt-19 px-24 mb-36 flex flex-col overflow-hidden"
          onClick={e => {
            e.stopPropagation()
          }}
        >
          <View className="w-full body-title mb-4">
            {icon ? (
              <View className="title-icon w-80 h-80 mb-13 mx-auto">
                <IconImg
                  imgName={`modal-${icon}`}
                  style={{
                    width: '100%',
                    height: '100%'
                  }}
                ></IconImg>
              </View>
            ) : null}
            <View className="hanzi h-24 leading-24 title-text text-center text-17 font-medium">
              {/* 为正确使用您的设备 */}
              {title || ''}
            </View>
          </View>
          <View className="hanzi body-content text-14 text-x_text ledaing-26">
            {content || ''}
          </View>
        </View>
        <View
          className="modal-footer h-50 flex border-0 border-t-1 border-solid"
          style={{
            borderColor: 'rgba(0, 0, 0, 0.1000) !important'
          }}
        >
          <View
            className="hanzi footer-cancelBtn flex-1 h-full flex items-center justify-center truncate"
            onClick={e => {
              e.stopPropagation()
              changeVisible(false)
              cancel && cancel()
            }}
          >
            {cancelText}
          </View>
          <View
            className="w-1 h-full"
            style={{
              backgroundColor: 'rgba(0, 0, 0, 0.1000)'
            }}
          ></View>
          <View
            className="hanzi footer-confirmBtn flex-1 h-full flex items-center justify-center truncate"
            onClick={e => {
              e.stopPropagation()
              confirm && confirm()
              changeVisible(false)
            }}
          >
            {confirmText}
          </View>
        </View>
      </View>
    </View>
  ) : (
    <></>
  )
}

export default CModal
